// toolbar
#books #toolbar {
    width: 100%;
    margin: auto;

    .library-large-screen {
        display: block;
    }

    .library-small-screen {
        display: none;
    }
}

// opened book
#books.book-opened {
    #toolbar {
        display: none !important;
    }

    .book.opened .book-box .book-title .book-title-text {
        max-width: calc(100% - 80px);
    }
}

// table layout
#books #book-list.table-layout {
    img.cover-image {
        width: 68px;
        height: 97px;
    }
}

// cover only layout
#books {
    max-width: 1200px;

    .book {
        overflow: hidden;
    }
}

#books #book-list.cover-only {
    width: 100%;

    .book {
        width: 181px;
        max-width: 181px;
        height: 258px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
            transform: scale(1.08) !important;
        }

        .book-box {
            .cover-image-box {
                width: 181px;
                height: 258px;

                img.cover-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

// detailed layout
#books {
    .book.detailed {
        max-width: 800px;

        .book-box {
            display: flex;

            .book-title {
                width: 100%;
                height: 60px;
                
                .book-title-text {
                    max-width: calc(100% - 40px);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .cover-image-box {
                overflow: hidden;
                width: 181px;
                height: 258px;

                img.cover-image {
                    width: 100%;
                    height: 100%;
                }
            }

            .book-information {
                width: calc(100% - 181px);
            }

            .book-info-not-loaded-box {
                width: calc(100% - 24px);
                height: 142px;
                line-height: 142px;
                font-size: 24px;
                text-align: center;
            }

            .book-info-table {
                width: calc(100% - 24px);
                background-color: transparent;
                text-align: left;
        
                .info-table-value {
                    height: 24px;
                    line-height: 24px;
                    width: 64px;
        
                    &.highlighted-words {
                        background-color: var(--v-highlightedWordLevel7-base);
                        color: var(--v-highlightedWordText-base);
                    }
        
                    &.new-words {
                        background-color: var(--v-newWord-base);
                        color: var(--v-highlightedWordText-base);
                    }
                }
        
                tbody tr,
                tbody tr td {
                    height: 26px !important;
                    line-height: 26px !important;
                    border: none !important;
                }
        
                tbody tr td:nth-child(2) {
                    padding-right: 0px;
                    
                    div {
                        float: right;
                    }
                }
            }
        }
    }
}

@media (max-width: 550px) {
    #books #toolbar {
        width: 100%;
        margin: auto;
    
        .library-large-screen {
            display: none;
        }
    
        .library-small-screen {
            display: block;
        }
    }

    // detailed layout
    #books .book.detailed {
        max-width: 400px;

        .book-box {
            flex-wrap: wrap;
        }

        .cover-image-box, 
        .book-information {
            width: 100% !important;
            height: auto !important;
        }

        .cover-image-box img.cover-image {
            width: 100%;
            height: auto !important;
        }

        .book-info-table {
            max-width: 360px;
        }

        td {
            padding-left: 0px;
        }
    }
}